<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>过滤器</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/moment.min.js"></script>
	</head>
	<body>
		<!--
				1. 理解过滤器
							功能: 对要显示的数据进行特定格式化
							注意: 不改变原数据, 而是产生新数据
				2. 编码
							1).定义过滤器
										Vue.filter(过滤器名字, function(value[,arg1,arg2,...]){
											// 进行一定的数据处理
											return newValue
										})
							2).使用过滤器
										<div>{{myData | filterName}}</div>
										<div>{{myData | filterName(arg)}}</div>
			-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>显示格式化后的时间</h2>
			<h3>{{time | dateFormater}}</h3>
			<h3>{{time | dateFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
		</div>

		<div id="root2">
			<h2>显示格式化后的时间</h2>
			<h3>{{time | dateFormater}}</h3>
			<h3>{{time | dateFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
		</div>


		<script type="text/javascript" >
			//注册的过滤器
			Vue.filter('dateFormater',function(value,str='YYYY-MM-DD'){
				return moment(value).format(str)
			})

			new Vue({
				el:'#root',
				data:{
					time:Date.now()
				},
			})

			new Vue({
				el:'#root2',
				data:{
					time:Date.now()
				},
			})
		</script>
	</body>
</html>